import React,{Component} from 'react'
import {TopicWrapper,TopicItem} from '../style'
import {connect} from 'react-redux'

class Topic extends Component{
  render(){
    const { list } = this.props;
    return (
        <TopicWrapper>
          {
            list.map((item) => (
                <TopicItem key={item.get('id')}>
                  <img
                      className='topic-pic'
                      src={item.get('imgUrl')}
                      alt=''
                  />
                  {item.get('title')}
                </TopicItem>
            ))
          }
        </TopicWrapper>
    )
  }
}

const mapState =(state) =>({
  list: state.getIn(["home", "topicList"])
});

export default connect(mapState, null)(Topic);